<template>
	<view class="bg-gray">
		<view class="width">
			<view class="bg-white commonbg topinfo">
				<view class="flex-row-between">
					<view class="flex-row-start font15">
						<image src="https://www.haopengsong.xyz/static/weixiu/home.png" mode="widthFix" class="home"></image>
						岭尚小区
					</view>
					<view class="qiehuan">切 换</view>
				</view>
				<view class="flex-row-start info">
					<image src="https://www.haopengsong.xyz/static/header.png" class="header" mode="aspectFit"></image>
					<view>
						<view class="flex-row-start">
							<view class="name  font16">张三</view>
							<view class="type font12">业主</view>
						</view>
						<view class="color9 font13 tel">电话: 13718638594</view>
					</view>
				</view>
			</view>
			<view class="width bg-white commonbg">
				<view class="font15 flex-row-start font500">
					<view class="line"></view>家庭成员列表
				</view>
				<view class="flex-row-between info" v-for='item in 1' :key='item'>
					<view class="flex-row-start">
						<image src="https://www.haopengsong.xyz/static/header.png" class="header" mode="aspectFit"></image>
						<view>
							<view class="flex-row-start">
								<view class="name  font16">张三</view>
								<view class="type font12">业主</view>
							</view>
							<view class="color9 font13 tel">电话: 13895239845</view>
						</view>
					</view>
					<view class="edit font13 color9 flex-row-start" @click="edit">
						<image src="https://www.haopengsong.xyz/static/editicon.png" class="editicon"></image>
						编辑
					</view>
				</view>
			</view>
			<view class="width apply">
				<u-button type="primary" shape='circle' @click="jump('/pages/member/invite')">邀请住户</u-button>
			</view>
		</view>
	</view>
   
</template>
<script>
import storage from "@/utils/storage.js"; //缓存 
import listfive from "@/components/huashuiwan/listfive.vue";

export default {
	data() { 
		return {
			bgimg:'https://www.haopengsong.xyz/static/movie/songdetail.png',
			carouselImage:[
				{ name:'https://www.haopengsong.xyz/static/movie/songbg.png'}
			]
		};
	},
	components: {
		listfive,
	},
	/**
	 * 页面加载
	 */
	onLoad(options) {
		
	},
	/**
	 * 页面显示
	 */
	onShow() {
		
	},
	/**
	 * 触底事件
	 */
	onReachBottom() {
		
	},
	/**
	 * 下拉刷新
	 */
	onPullDownRefresh() {
		
	},
	/**
	 * 页面滚动
	 * @param {Object} e
	 */
	onPageScroll(e) {
		
	},
	mounted() {
		
	},
	methods: {
		jump(res){
			uni.navigateTo({
				url: res
			});
		},
		edit(){
			uni.navigateTo({
				url: '/pages/member/invite?edit=1'
			});
		}
	}
};
</script>

<style scoped lang="scss">
	.topinfo{
		margin-bottom: 10px;
		.home{
			width: 35px;
			height: 35px;
			margin-right: 10px;
		}
	}
	.editicon{
		width: 20px;
		height: 20px;
		margin-right: 6px;
	}
	.info{
		padding-top: 10px;
		border-top:1px solid #F6F6F6;
		margin-top: 10px;
		.header{
			width: 54px;
			height: 54px;
			border-radius: 50%;
		}
		.name,.tel{
			padding: 0 10px;
		}
		.tel{
			margin-top: 10px;
		}
		.type{
			background-color: #FFF7E8;
			color: #FF9100;
			display: inline-block;
			padding: 3px 10px;
			border-radius: 4px;
		}
	}
	.qiehuan{
		width: 78px;
		height: 28px;
		text-align: center;
		line-height: 28px;
		border-radius: 28px;
		background-color: #499C43;
		color: #fff;
	}
	.apply{
		margin-top: 20px;
	}
</style>